<script>
    if(!location.hash.replace('#', '').length) {
        location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
        location.reload();
    }
</script>

<title>Select Broadcaster at runtime / RTCMultiConnection</title>
<h1>Select Broadcaster at runtime / <a href="http://www.RTCMultiConnection.org/">RTCMultiConnection</a>
</h1>

<script>
if (!location.hash.replace('#', '').length) {
    location.hash = (Math.random() * 1000).toString().replace('.', '');
    location.reload();
}
</script>

<script src="https://cdn.webrtc-experiment.com/socket.io.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://cdn.webrtc-experiment.com/CodecsHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/IceServersHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>
<hr />
<button id="openNewSessionButton">Open New Room</button>
<button id="select-broadcaster-id" disabled>Select New Broadcaster</button>
<hr />
<script>
var connection = new RTCMultiConnection();

// https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socketio-over-nodejs
var SIGNALING_SERVER = 'https://socketio-over-nodejs2.herokuapp.com:443/';
connection.openSignalingChannel = function(config) {
    var channel = config.channel || connection.channel || 'default-namespace';
    var sender = Math.round(Math.random() * 9999999999) + 9999999999;

    io.connect(SIGNALING_SERVER).emit('new-channel', {
        channel: channel,
        sender: sender
    });

    var socket = io.connect(SIGNALING_SERVER + channel);
    socket.channel = channel;

    socket.on('connect', function() {
        if (config.callback) config.callback(socket);
    });

    socket.send = function(message) {
        socket.emit('message', {
            sender: sender,
            data: message
        });
    };

    socket.on('message', config.onmessage);
};

// easiest way to customize what you need!
connection.session = {
    audio: true,
    video: true,
    oneway: true
};

connection.onNewSession = function(session) {
    connection.dontCaptureUserMedia = true;
    session.join({
        oneway: true
    }); // argument is optional
};

connection.userid = prompt('Please enter your userid.');

// on getting local or remote media stream
connection.onstream = function(e) {
    document.body.appendChild(e.mediaElement);
};

// setup signaling channel
connection.connect();

// open new session
document.querySelector('#openNewSessionButton').onclick = function() {
    this.disabled = true;
    connection.open();

    document.querySelector('#select-broadcaster-id').disabled = false;
};

document.querySelector('#select-broadcaster-id').onclick = function() {
    var targetUserId = prompt('Please type new broadcaster id');
    connection.sendCustomMessage({
        messageFor: targetUserId,
        broadcast: true
    });
};

connection.onCustomMessage = function(message) {
    if (message.messageFor == connection.userid && message.broadcast == true) {
        // because "viewer" joined room as "oneway:true"
        // initiator will NEVER share participants
        // to manually ask for participants;
        // call "askToShareParticipants" method.
        connection.askToShareParticipants();

        connection.dontCaptureUserMedia = false;
        connection.addStream({
            audio: true,
            video: true
        });
    }
};
</script>

<pre>
    // because "viewer" joined room as "oneway:true" // initiator will NEVER share participants // to manually ask for participants; // call "askToShareParticipants" method. connection.askToShareParticipants(); // become a broadcaster connection.
    <a href="http://www.rtcmulticonnection.org/docs/addStream/">addStream</a>({ audio: true, video: true, oneway: true });
</pre>

<style>
video {
    width: 20%;
}
</style>